import React from 'react'
import style from './style.employ-management-update'
import { success, Button, InputList, Input, DateSelect, Select,  Link, TitleBar } from '../../ui-components'
import { connect } from 'react-redux'
import util from '../../util'
import styleTransfer from './style.transfer-user'
import cx from 'classnames'

export default
@connect(({ transfer }) => ({ transfer }))
class TransferUser extends React.Component {

  componentWillReceiveProps(props) {
    if (props.params.transferId != this.props.params.transferId) {
      this.fetchDetail(props)
    }
  }

  componentWillUnmount() {
    this.props.resetTransfer()
  }

  fetchDetail(props) {
    props = props || this.props
    this.props.fetchTransferDetail(props.params.transferId)
  }
  
  componentDidMount() {
    this.fetchDetail()
  }

  render() {
    const { detail={} } = this.props.transfer
    const { userSimpleUserProfileVO: coreProfile={} } = detail
    const { 
      afterJobLevelOrgPickOptionVO={}, 
      afterJobTitleOrgPickOptionVO={}, 
      afterReporterSimpleUserProfileVO={},
      afterTeamVO={}, 
      beforeJobLevelOrgPickOptionVO={},
      beforeJobTitleOrgPickOptionVO={},
      beforeReporterSimpleUserProfileVO={},
      beforeTeamVO={}
    } = detail
    return (
      <div>
        <TitleBar
          back
          label="办理调岗"
        />
        <div className={cx(style.list, styleTransfer.list)}>
          <div className={style.user}>
            <label>调岗对象</label>
            <div className={styleTransfer['avatar']}>
              <Link 
                noHover
                src={coreProfile.avatarUrl}
                srcIcon="avatar"
                width="120"
              />
              <span style={{color : '#fff', marginLeft: '0px' }}>{ coreProfile.fullName || '' }</span>
            </div>
          </div>
          <div>
            <label>调岗类型</label>
            <div>
              <p>{ detail.transferType }</p>
            </div>
          </div>
          <div>
            <label>正式调岗日期</label>
            <div>
              <p>{ util.time(detail.transferDate) }</p>
            </div>
          </div>
          <div>
            <label>调岗后部门</label>
            <i>调岗前部门: { beforeTeamVO.teamName || '' }</i>
            <div>
              <p>{ afterTeamVO.teamName }</p>
            </div>
          </div>
          <div>
            <label>调岗后汇报对象</label>
            <i>调岗前汇报对象: { beforeReporterSimpleUserProfileVO? (beforeReporterSimpleUserProfileVO.fullName || ''): '无' }</i>
            <div>
              <p>{ afterReporterSimpleUserProfileVO? afterReporterSimpleUserProfileVO.fullName: '无' }</p>
            </div>
          </div>
          <div>
            <label>调岗后职位</label>
            <i>调岗前职位: { beforeJobTitleOrgPickOptionVO? (beforeJobTitleOrgPickOptionVO.optionValue || ''): '' }</i>
            <div>
              <p>{ afterJobTitleOrgPickOptionVO.optionValue }</p>
            </div>
          </div>
          <div>
            <label>调岗后职级</label>
            <i>调岗前职级: { beforeJobLevelOrgPickOptionVO? (beforeJobLevelOrgPickOptionVO.optionValue || ''): '' }</i>
            <div>
              <p>{ afterJobLevelOrgPickOptionVO.optionValue }</p>
            </div>
          </div>
          <div>
            <label>说明</label>
            <div>
              <p>{ detail.description }</p>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
